<template>
  <n-menu :options="menuOptions" :value="activeKey" />
</template>
<script lang="ts" setup>
import type { MenuOption } from 'naive-ui'
import { h, ref, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
defineOptions({ name: 'ModelSidebar' })
const route = useRoute()
const menuOptions: MenuOption[] = [
  {
    label: () => h(RouterLink, { to: '/model/list' }, () => '模型管理'),
    key: 'model-list',
  },
  {
    label: () => h(RouterLink, { to: '/model/state' }, () => '状态管理'),
    key: 'model-state',
  },
]

const activeKey = ref('model-list')
watch(
  () => route.name,
  (name) => {
    activeKey.value = String(name)
  },
  {
    immediate: true,
  },
)
</script>
<style lang="scss"></style>
